<!doctype html>
<html>
<head>
    <meta charset = "UTF-8">
    <title>用户管理</title>
    <link href = "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel = "stylesheet">
    <link href = "https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel = "stylesheet">
    <link href = "https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel = "stylesheet">
    <link href = "./img/logo.png" rel = "shortcut icon" type = "image/x-icon">
    <script src = "https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src = "https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script src = "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style type = "text/css">

    </style>
</head>
<body>
<div id = "app">
    <v-app>
        <div style = "height: 100%">
            <template>
                <v-toolbar
                    color = "grey lighten-1"
                    dark
                    flat
                >
                    <v-toolbar-title>
                        All users
                    </v-toolbar-title>
                    <v-spacer></v-spacer>
                    <div>
                        <v-menu
                            offset-y
                        >
                            <template v-slot:activator = "{ on, attrs }">
                                <v-btn
                                    icon
                                    v-bind = "attrs"
                                    v-on = "on"
                                >
                                    <v-avatar>
                                        <img
                                            alt = "Avatar"
                                            src = "img/manager.jpg"
                                            style = "height: 30px; width: 30px;"
                                        >
                                    </v-avatar>
                                </v-btn>
                            </template>

                            <v-list
                                style = "border-radius: 6px"
                                width = "140"
                            >
                                <v-list-item
                                    @click = "logout"
                                    style = "min-height: 35px"
                                >
                                    <v-list-item-title style = "font-size: 0.5em;">
                                        <v-icon left>
                                            mdi-logout
                                        </v-icon>
                                        退出
                                    </v-list-item-title>
                                </v-list-item>
                            </v-list>
                        </v-menu>
                    </div>
                </v-toolbar>
                <v-data-table
                    :headers = "headers"
                    :items = "users"
                    class = "elevation-1"
                    sort-by = "username"
                    :footer-props="{
                        itemsPerPageText: '每页行数',
                        itemsPerPageAllText: '全部',
                    }"
                >
                    <template v-slot:top>
                        <v-toolbar
                            flat
                        >
                            <v-dialog
                                max-width = "500px"
                                v-model = "dialog"
                            >
                                <v-card>
                                    <v-card-title>
                                        <span class = "headline">编辑用户</span>
                                    </v-card-title>
                                    <v-card-text>
                                        <v-container>
                                            <v-row>
                                                <v-col
                                                    cols = "12"
                                                    md = "4"
                                                    sm = "6"
                                                >
                                                    <v-text-field
                                                        label = "Password"
                                                        v-model = "editedItem.password"
                                                    ></v-text-field>
                                                </v-col>
                                                <v-col
                                                    cols = "12"
                                                    md = "4"
                                                    sm = "6"
                                                >
                                                    <v-text-field
                                                        label = "Visible Spider"
                                                        v-model = "editedItem.visible_spider"
                                                    ></v-text-field>
                                                </v-col>
                                            </v-row>
                                        </v-container>
                                    </v-card-text>
                                    <v-card-actions>
                                        <v-spacer></v-spacer>
                                        <v-btn
                                            @click = "close"
                                            color = "blue darken-1"
                                            outlined
                                            text
                                        >
                                            Cancel
                                        </v-btn>
                                        <v-btn
                                            @click = "save"
                                            color = "blue darken-1"
                                            outlined
                                            text
                                        >
                                            Save
                                        </v-btn>
                                    </v-card-actions>
                                </v-card>
                            </v-dialog>
                        </v-toolbar>
                    </template>

                    <template v-slot:item.actions = "{ item }">
                        <v-icon
                            @click = "editItem(item)"
                            class = "mr-2"
                            small
                        >
                            mdi-pencil
                        </v-icon>
                        <v-icon
                            @click = "deleteItem(item)"
                            small
                        >
                            mdi-delete
                        </v-icon>
                    </template>

                    <template v-slot:no-data>
                        无数据
                    </template>
                </v-data-table>
            </template>
        </div>
    </v-app>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data: {
            dialog: false,
            headers: [
                {text: 'Username', value: 'username'},
                {text: 'Password', value: 'password'},
                {text: 'Visible Spider', value: 'visible_spider'},
                {text: 'Actions', value: 'actions', sortable: false},
            ],
            users: [],
            editedItem: {
                username: '',
                password: '',
                visible_spider: '',
            },
            defaultItem: {
                username: '',
                password: '',
                visible_spider: '',
            },
        },
        methods: {
            editItem(item) {
                this.editedItem = item
                this.dialog = true
            },

            deleteItem(item) {
                axios.delete(`/api/delete_user/${item.username}`)
                this.users.splice(item.i, 1)
            },

            close() {
                this.dialog = false
                this.$nextTick(() => {
                    this.editedItem = this.defaultItem
                })
            },

            save() {
                axios.post('/api/update_user', this.editedItem)
                this.users[this.editedItem.i] = this.editedItem
                this.close()
            },

            logout() {

            },
        },

        computed: {},

        watch: {
            dialog(val) {
                val || this.close()
            },
        },

        created() {
            axios
                .get('/api/list_user')
                .then(response => {
                    this.users = response.data.map((v, i) => Object.assign({i: i}, v))
                })
        },
    })
</script>
</body>
</html>
